<template>
	<view class="mine-container">
		<!-- 用户信息 -->
		<view class="user-info" @tap="handleLogin">
			<view class="avatar-wrap">
				<image class="avatar" :src="userInfo.avatar || '/static/images/default-avatar.png'" mode="aspectFill"></image>
			</view>
			<view class="info-wrap">
				<text class="nickname">{{ userInfo.nickname || '点击登录' }}</text>
				<text class="desc" v-if="userInfo.id">{{ userInfo.desc || '这个人很懒，什么都没写~' }}</text>
			</view>
		</view>
		
		<!-- 用户数据 -->
		<view class="user-data">
			<view class="data-item" @tap="navigateTo('/pages/reading-history/reading-history')">
				<text class="num">{{ readingDays }}</text>
				<text class="label">读书天数</text>
			</view>
			<view class="data-item" @tap="navigateTo('/pages/book-notes/book-notes')">
				<text class="num">{{ noteCount }}</text>
				<text class="label">笔记</text>
			</view>
			<view class="data-item">
				<text class="num">{{ readingTime }}</text>
				<text class="label">累计阅读</text>
			</view>
		</view>
		
		<!-- 功能列表 -->
		<view class="function-list">
			<view class="function-item" v-for="(item, index) in functionList" :key="index" @tap="navigateTo(item.path)">
				<view class="left">
					<image class="icon" :src="item.icon"></image>
					<text class="name">{{ item.name }}</text>
				</view>
				<image class="arrow" src="/static/images/arrow-right.png"></image>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			userInfo: {},
			readingDays: 0,
			noteCount: 0,
			readingTime: '0小时',
			functionList: [
				{
					name: '阅读记录',
					icon: '/static/images/mine/reading.png',
					path: '/pages/reading-history/reading-history'
				},
				{
					name: '我的笔记',
					icon: '/static/images/mine/note.png',
					path: '/pages/book-notes/book-notes'
				},
				{
					name: '我的书评',
					icon: '/static/images/mine/comment.png',
					path: '/pages/my-comments/my-comments'
				},
				{
					name: '意见反馈',
					icon: '/static/images/mine/feedback.png',
					path: '/pages/feedback/feedback'
				},
				{
					name: '设置',
					icon: '/static/images/mine/settings.png',
					path: '/pages/settings/settings'
				}
			]
		}
	},
	onShow() {
		this.getUserInfo()
		this.getReadingStats()
	},
	methods: {
		handleLogin() {
			if (!this.userInfo.id) {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			}
		},
		getUserInfo() {
			// 获取用户信息
			// 这里模拟数据，实际应该从服务器获取
			this.userInfo = {
				id: 1,
				nickname: '书虫一枚',
				avatar: '/static/R-C.jpg',
				desc: '爱读书，爱生活'
			}
		},
		getReadingStats() {
			// 获取阅读统计数据
			// 这里模拟数据，实际应该从服务器获取
			this.readingDays = 128
			this.noteCount = 36
			this.readingTime = '168小时'
		},
		navigateTo(path) {
			uni.navigateTo({
				url: path
			})
		}
	}
}
</script>

<style lang="scss">
.mine-container {
	min-height: 100vh;
	background: #f5f5f5;
	
	.user-info {
		height: 300rpx;
		background: linear-gradient(to right, #3cc51f, #42d03f);
		padding: 40rpx;
		display: flex;
		align-items: center;
		
		.avatar-wrap {
			.avatar {
				width: 120rpx;
				height: 120rpx;
				border-radius: 60rpx;
				border: 4rpx solid rgba(255, 255, 255, 0.4);
			}
		}
		
		.info-wrap {
			margin-left: 30rpx;
			color: #fff;
			
			.nickname {
				font-size: 36rpx;
				font-weight: bold;
				margin-bottom: 10rpx;
				display: block;
			}
			
			.desc {
				font-size: 26rpx;
				opacity: 0.8;
			}
		}
	}
	
	.user-data {
		margin: -60rpx 40rpx 0;
		background: #fff;
		border-radius: 20rpx;
		padding: 40rpx 0;
		display: flex;
		justify-content: space-around;
		
		.data-item {
			text-align: center;
			
			.num {
				font-size: 36rpx;
				font-weight: bold;
				color: #333;
				display: block;
				margin-bottom: 10rpx;
			}
			
			.label {
				font-size: 26rpx;
				color: #999;
			}
		}
	}
	
	.function-list {
		margin: 40rpx;
		background: #fff;
		border-radius: 20rpx;
		
		.function-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 30rpx;
			border-bottom: 1rpx solid #f5f5f5;
			
			&:last-child {
				border-bottom: none;
			}
			
			.left {
				display: flex;
				align-items: center;
				
				.icon {
					width: 40rpx;
					height: 40rpx;
					margin-right: 20rpx;
				}
				
				.name {
					font-size: 28rpx;
					color: #333;
				}
			}
			
			.arrow {
				width: 32rpx;
				height: 32rpx;
			}
		}
	}
}
</style> 